<template>
  <!-- 分类 -->
  <div class="classify">
    <!-- <div class="input">
      <input placeholder="金戈41片畅销黄金装" @click="gosearch">
    </div> -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="searchbox">
      <div class="inputbox">
        <img style="width:15px;height:16px;margin:0 10px 0 18px" src="../../assets/img/sousuo.png" alt />
        <input @click="gosearch" type="text" placeholder="搜索您想要的药品" />
      </div>
      <p class="sousuo"  @click="gosearch">搜索</p>
    </div>
    <!-- <div style="width:100%;height:15px;background: #f6f6f6;"></div> -->
    
    <div class="boxs">
      
      <!-- 一级 -->
      <div class="box-l">
        <div v-for="(item,index) in list" :key="index" :class="{color:first == index}" 
        @click="selectItem($event,index)">{{item.cat_name}}</div>
      </div>

      <!-- 二级 -->
      <div class="box-r" v-if="!third" >
        <!-- <img class="banner" src="../../assets/img/fenlei.png" alt=""> -->
        <div class="box-item" v-if="secondlist.length != 0">
          <div class="item" v-for="(item,index) in secondlist" :key="index" @click="thirdItem($event,index)">
            <p>{{item.cat_name}}</p>
          </div>
        </div>
        <div v-else>
          <p class="zanwu">暂无内容</p>
        </div>
      </div>
      
      <!-- 三级 -->
      <div class="box-r" v-if="third">
        <!-- <img class="banner" src="../../assets/img/fenlei.png" alt=""> -->
        <div v-if="loading">
          <div class="box-item" v-if="thirdlist.length != 0">
            <div class="item" v-for="(item,index) in thirdlist" :key="index" @click="golist(item.cat_id)">
              <p>{{item.cat_name}}</p>
            </div>
          </div>
          <div v-else>
            <p class="zanwu">暂无内容</p>
          </div>
        </div>
        <van-loading size="30px" v-if="!loading" style="text-align:center" />
        
      </div>



    </div>
    </van-pull-refresh>
    <div class="footer">
      <Footer v-bind:select="select" @activeindex="childerfn"></Footer>
    </div>
  </div>
</template>

<script>
  import Footer from "../footer";
  export default {
    data() {
      return {
        // 下拉刷新
        isLoading:false,
        list:'',
        secondlist:[],
        first:0,
        third:false,
        thirdlist:[],
        select: 2,
        loading:false
      }
    },
    // first    second     third
    components: {
      Footer
    },
    created() {
      this.getlist()
    },
    mounted(){
      
    },
    methods: {
      onRefresh() {
        setTimeout(() => {
          // Toast('刷新成功');
          this.getlist()
          this.isLoading = false;
        }, 1000);
      },
      // 药品查询分类
      getlist(){
        this.$get("api/gzh_index.php?action=goods_type", {
        
        }).then(res => { 
          console.log(res.data,'res')
          this.list = res.data
          for(var a in this.list){
            if(this.first == a){
              this.secondlist = this.list[a].sons
            }
          }
        }).catch(err => {
          
        });
      },
      // 定时器 展示转圈
      loads(){
        setTimeout(() => {
          this.loading = true
        }, 1000)
      },
      // 筛选一级分类  展示二级数据
      selectItem(e,index){
        this.first = index;
        this.loading = false
        this.third = false
        for(var a in this.list){
          if(index == a){
            this.secondlist = this.list[a].sons
          }
        }
      },
      // 筛选二级分类  展示三级数据
      thirdItem(e,index){
        this.loads()
        this.third = true
        for(var a in this.secondlist){
          if(index == a){
            this.thirdlist = this.secondlist[a].sons
          }
        }
      },
      // 跳转药品列表
      golist(id){
        this.$router.push({name:'classify-list',query: {thirdid:id}}) 
      },
      // 跳转搜索页面
      gosearch(){
        this.$router.push({name:'search'}) 
      },
      // 底部
      childerfn(index) {
        this.select = index;
      }
    },
  }
</script>

<style scoped>
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.classify{
  width: 100%;
  height:100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tit{
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size:34px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(51,51,51,1);
}
/* .input{
  width: 100%;
  height:80px;
  padding: 0 30px;
  box-sizing: border-box;
  text-align: center;
  margin-top: 20px;
}
.input input{
  width: 684px;
  height: 73px;
  outline: none;
  border: 1PX solid #F2F2F2;
  border-radius: 15px;
  padding: 0 20px;
  box-sizing: border-box;
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
} */
.searchbox {
  width: 100%;
  height: 100px;
  background: rgba(6, 162, 85, 1);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.searchbox .inputbox {
  width: 612px;
  height: 56px;
  background: rgba(255, 255, 255, 1);
  border-radius: 28px;
  display: flex;
  align-items: center;
}
.searchbox .inputbox input {
  font-size: 26px;
  border: none;
  width: 80%;
}
.sousuo{
  font-size: 30px;
  color: #fff;
}




.boxs{
  /* margin-top: 30px; */
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex: 1;
  height: calc(100% - 130px);
}
.box-l {
  width: 200px;
  background: #f6f6f6;
  height: 92%;
  overflow: hidden;
  overflow-y: scroll;
}
.box-l::-webkit-scrollbar {
  display: none;
  width:0px
}
.box-l div{
  font-size: 28px;
  color: #333;
  width: 100%;
  height: 80px;
  background: #f6f6f6;
  line-height: 80px;
  text-align: center;
  overflow: hidden;
}
.box-l .color{
  color:#fff;
  background: rgba(6, 162, 85, 1);
}
.box-r {
  width: calc(100% - 200px);
  padding: 0 20px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: scroll;
  height: 92%;
}
.box-r::-webkit-scrollbar {
  display: none;
  width:0px
}
.box-r .banner{
  width: 541px;
  height: 174px;
}
.box-item{
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.item{
  text-align: center;
}
.item p{
  height: 58px;
  margin-top: 20px;
  font-size: 28px;
  color: #3a3a3a;
  border: 1PX solid #ccc;
  line-height: 58px;
  box-sizing: border-box;
  margin-right: 10px;
  padding:  0 20px;
}
.zanwu{
  font-size: 28px;
  margin-top: 150px;
  text-align: center;
}
</style>
<style>
.van-pull-refresh{
  height: 100%;
}
.van-pull-refresh__track{
  height: 100%;
}
</style>